<template>
  <div class="app" style="border: 2px solid red">
    <div style="display: flex">
      <!-- 在此处添加一个BMI状态的组件 -->
      <BMICalcComponent @my-data="myData"/>
      <BMIStatusComponent :status="status"/>
    </div>

    <BMIListComponent
      title="bmi list component"
      :bmi-list="bmiList"
      :del="del"
    />
    <!-- 在页面请求数据 -->
  </div>
</template>

<script>
import BMIListComponent from "@/components/BMIListComponent";
import BMICalcComponent from "@/components/BMICalcComponent";
import axios from 'axios';
import BMIStatusComponent from "@/components/BMIStatusComponent";

export default {
  name: 'App',
  components: {
    BMIStatusComponent,
    BMIListComponent,
    BMICalcComponent
  },
  data() {
    return {
      status: '',
      bmiList: []
    }
  },
  created() {
    this.getBMIList()
  },
  provide: {
    testProvide: '我是App的数据',
  },
  methods: {
    myData(data) {
      axios({
        method: 'POST',
        url: 'http://yizhanketang.com:1010/api/v1/bmi',
        data
      }).then((res) => {
        const { status } = res.data
        this.status = status
        this.getBMIList()
      })
    },
    getBMIList() {
      axios({
        method: 'GET',
        url: 'http://yizhanketang.com:1010/api/v1/bmi'
      }).then(res => {
        this.bmiList = res.data
      })
    },
    del(id) {
      if (confirm('你确定要删除数据吗？')) {
        axios({
          method: 'DELETE',
          url: `http://yizhanketang.com:1010/api/v1/bmi/${id}`
        }).then(() => {
          this.getBMIList()
        })
      }
    }
  }
}

// App -> List -> item -> xx -> xxx

// 跨多层组件传值使用 provide inject
// 祖先组件provide, ->->->->-> 后代组件inject

</script>

<style>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
